<template>
  <div class="homeHeader_bigboxox">
    <cityHeader :cities="cities"></cityHeader>
    <cityliebiao :cities="cities" :hot="hotCities" :leter="leter"></cityliebiao>
    <rightlist :cit="cities"  @change="changeClick"></rightlist>
  </div>
</template>

<script>
import axios from "axios";
import cityHeader from "./components/header";
import cityliebiao from "./components/liebiao";
import rightlist from "./components/rightlist";
export default {
  components: {
    cityHeader,
    cityliebiao,
    rightlist
  },
  data() {
    return {
      cities: {}, //这是abc的城市，返回时对象
      hotCities: [], //热门城市，返回时数组
      leter:'',//这是先设置为一个空的，意思开始未点击时候接收为空的字符串
    };
  },
  props: {},
  methods: {
    getHomeInfo() {
      // 获取get请求的方法 url，axops返回的是一个prop对象，所以这里用then, then里再次执行一个方法，下面是执行接口请求
      axios.get("/api/city.json").then(this.getHomeInfoSucc);
    },
    getHomeInfoSucc(res) {
      console.log(res);
      // 对接接口
      res = res.data;
      // 判断若是res.ret就是后天若是返回有data数据
      if (res.ret && res.data) {
        // 请求这是abc的城市，这个数据结构是data.data
        this.cities = res.data.cities;
        //   请求热门城市。这个数据结构是data.data
        this.hotCities = res.data.hotCities;
      }
    },
    //   父组件接收rightlist的组件传过来的change事件,需要接受一个参数
    changeClick(leter) {
        // 这样就是接收到rightlist的子组件
      console.log('change监听：'+leter);
    //   然后需要把这个参数再传给子组件的兄弟组件liebiao.vue，也就是父组件传子组件，这需要属性
      this.leter=leter
    }
  },
  // 渲染挂在完成时候，执行一个函数,函数是接口，但是函数应该定义在methods这个方法里面
  mounted() {
    this.getHomeInfo();
  }
};
</script>
<style lang="stylus" scoped></style>